<template>
  <div id="member-shop-collect-list-page" :style="{
    width:'100%',
    height: (this.getWinSize().height-43-this.getSafeArea().top)+'px',
    paddingTop:(this.getSafeArea().top+43)+'px'
  }">
    <div class="page-title" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.push('/MemberHome')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>店铺收藏</span>
    </div>

    <i-scroller-box id="shop-list" ref="i-scroller-box"
                    url="Member/getShopCollectList"
                    :height="getWinSize().height-40-this.getSafeArea().top-10"
                    :style="{
       width:'100%',
                    }">
      <template v-slot:list-item="{index,data}">
        <shop-list-item   :show-type="2" :key="index"  :shop="{
          id:data.shopId,
          name:data.shopName,
          logo:data.shopLogo,
          address:data.shopAddress,
        }" :cancel-call-back="reflushList"/>
      </template>
    </i-scroller-box>
  </div>
</template>

<script>
import ShopListItem from '../common/ShopListItem'
import IScrollerBox from '../common/IScrollerBox'
export default {
  name: 'MemberShopCollectList',
  components: {IScrollerBox, ShopListItem},
  data:function () {
    return {
      shopList:[]
    }
  },
  mounted () {
    this.getList()
  },
  methods:{
    reflushList:function () {
      this.getList(true)
    },
    getList: function (isReflush) {
      let $this = this
      var page = 1
      var pageSize = 20
      if ($this.shopList.length > 0 && !isReflush) {
        page = Math.ceil(($this.shopList.length / pageSize).toFixed(1))
      }
      if (isReflush){
        $this.shopList=[]
      }
      var form = {page, pageSize}
      form.sortProp = 'id'
      form.sortOrder = 'DESC'
      $this.$refs['i-scroller-box'].getList(form)
    }
  }
}
</script>

<style scoped>

</style>
